<template>
  <transition name="fade1">
    <div class="scroll_content" @touchmove.stop="stop_slider" @touchstart="start_slider">
       <div class="scroll_wrap">
          <b @click="cancleSelect"></b>
          <div class="head_wrap"  v-if="currentItem">
            <span :style="{backgroundImage:'url('+currentItem.img+')'}"></span>
            <div>
              <span>{{currentItem.names}}</span>
              <p>¥{{currentItem.price}}</p>
              <b>已选择：{{currentItem.spaces}}</b>
            </div>
          </div>
         <div class="body_wrap" ref="scroll_wrap">
           <div>
             <span>规格：</span>
             <ul>
               <li
                 v-for="(item , index) in specList"
                 @click='selectS(index)'
                 :class='item.sid===specId?"active":""'>{{item.size}}</li>
             </ul>
           </div>
           <div>
             <span>颜色：</span>
             <ul>
               <li
                 v-for="(item , index) in colorList"
                 @click='selectC(index)'
                 :class='item.color_id===colorId?"active":""'>{{item.color_names}}</li>
             </ul>
           </div>
          <h5>
            <b @click="add"></b>
              <input @input="inputEvent" type="number" v-model="count">
            <b @click="remove"></b>
          </h5>
         </div>
         <div class="foot_wrap">
           <span @click="cancleSelect">取消</span>
           <p @click="set_shop_car">确定</p>
         </div>
       </div>
  </div>
  </transition>
</template>

<script>
  import {stop_slider} from 'assets/base/base'
  import {get_cookie} from 'assets/cookie/cookie'
  import {get_items_spec,set_items_hint} from 'api/detial'
  import {set_shop_car} from 'api/shop_car'
  import {mapMutations} from 'vuex'

  export default {
    name: "commentList",
    props:['itemDetial'],
    data() {
      return {
        specList:[],
        colorList:[],
        specId:'',
        colorId:'',
        sIndex:0,
        currentItem:null,
        count:''
      }
    },
    created() {
      get_items_spec({
        goodsId:this.itemDetial&&this.itemDetial.id,
        token:get_cookie('key')
      }).then(res=>{
        if(res.status===200&&res.data.errno===0){
          console.log(res.data.data)
          this.currentItem=res.data.data[0].color[0].product_list[0]
          this.specList=res.data.data
          this.colorList=res.data.data[0].color
          this.specId=res.data.data[0].sid
          this.colorId=res.data.data[0].color[0].color_id
          this.count=res.data.data[0].color[0].product_list[0].amount
          console.log(this.currentItem)
        }
      })

    },
    computed: {},
    methods: {
      start_slider(e) {
        this.start = {
          X: e.touches[0].pageX,
          Y: e.touches[0].pageY
        }
      },
      stop_slider(e) {
        stop_slider(e, this.$refs.scroll_wrap, this.start)
      },
      cancleSelect(id){
        this.$emit('cancleSelect',id)
      },
      selectC(index){
        if(this.specList[this.sIndex].color[index].color_id===this.colorId){
          return
        }
        this.colorId=this.specList[this.sIndex].color[index].color_id
        this.currentItem=this.specList[this.sIndex].color[index].product_list[0]
        this.count=this.specList[this.sIndex].color[index].product_list[0].amount
      },
      selectS(index){
        if(this.specList[index].sid===this.specId){
          return
        }
        this.sIndex=index
        this.specId=this.specList[index].sid
        this.colorList=this.specList[index].color
        this.colorId=this.specList[index].color[0].color_id
        this.currentItem=this.specList[index].color[0].product_list[0]
        this.count=this.specList[index].color[0].product_list[0].amount
      },
      add(){
        this.count++
        if(this.count>999){
          this.count=999
        }
        this.set_items_hint()
      },
      remove(){
        this.count--
        if(this.count<1){
          this.count=1
        }
        this.set_items_hint()
      },
      inputEvent(){
        if(this.count>999){
          this.count=999
        }
        if(this.count){
          this.set_items_hint()
        }

      },
      set_items_hint(){
        set_items_hint({
          goodsId:this.currentItem.id,
          amount:this.count
        }).then(res=>{
          console.log(res)
          if(res.status&&res.data.resStatus!==0){
             alert(res.data.message)
            this.count=res.data.data||1
          }
        })
      },
      ...mapMutations({
        setHint:'SET_HINT',
        setIsLogin: 'SET_IS_LOGIN',
      }),
      set_shop_car(){
        if(this.count){
          set_shop_car({
            token:get_cookie('key'),
            id:this.currentItem.id,
            amount:this.count
          }).then(res=>{
            if(res.status===200&&res.data.resStatus===0){
              this.setHint({
                isHint:true,
                text:'加入购物车成功',
                ok:true
              })
              this.cancleSelect(this.currentItem.id)
            }else if(res.data.resStatus===1){
                  this.setIsLogin(false)
            }else{
              alert(res.data.message)
            }
          })
        }

      }
    },
    components: {

    }
  }
</script>

<style scoped lang="scss">
  .scroll_content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 11;
    padding-top:20%;
    background: rgba(0,0,0,0.1);
  }
  .scroll_wrap{
    height: 100%;
    background:#fff;
    position: relative;
    >b{
      position: absolute;
      width: 20px;
      height: 20px;
      right: 5px;
      top: 5px;
      background-image: url('../assets/img/x.png');
      background-size: 100% 100%;
      z-index: 10;
    }
  }
  .head_wrap{
  height: 80px;
  border-bottom: 1px solid #ddd;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
    z-index: 5;
  >span{
    float: left;
    width: 60px;
    height: 60px;
    margin-top: 10px;
    margin-left: 40px;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url('../assets/img/weixin.png');
    background-repeat: no-repeat;
    margin-right: 15px;
  }
  >div{
    overflow: hidden;
    height: 80px;
    padding-top: 15px;
    text-align: left;
    >p{
      color: #1ba2e8;
      margin-top: 7px;
      margin-bottom: 6px;
    }
  }
}
  .body_wrap{
    height: 100%;
    padding-top: 90px;
    padding-bottom: 90px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    text-align: left;
    >div{
      margin-bottom:20px;
      padding-left: 20px;
      padding-right: 20px;
      >ul{
        overflow: hidden;
        >li{
          border: 1px solid #bbb;
          color:#333;
          height: 30px;
          line-height: 30px;
          float: left;
          margin-top: 5px;
          padding-left: 20px;
          padding-right: 20px;
          margin-right: 10px;
          border-radius: 3px;
        }
        >.active{
          border: 1px solid #f10;
          color:#f10;
        }
      }
    }
    >h5{
      height: 42px;
      width: 100px;
      position: absolute;
      bottom: 49px;
      right: 12px;
      background: #fff;
        >b{
          float: right;
          height: 30px;
          width: 30px;
          border-radius: 50%;
          font-size: 20px;
          background-size: 100% 100%;
          background-image: url('../assets/img/add.png');
        }
        input{
          float: right;
          padding-left: 3px;
          width: 38px;
          padding-right: 3px;
          margin-top: 8px;
          height: 16px;
          border-radius: 5px;
          font-size: 14px;
          outline: none;
          color: #4caeea;
          border: none;
          text-align: center;
        }
        >b:nth-child(3){
          line-height: 19px;
          background-image: url('../assets/img/remove.png');
        }
    }
  }
  .foot_wrap{
    background: #fff;
    position: absolute;
    bottom: 0;
    height: 50px;
    line-height: 50px;
    width: 100%;
    border-top: 1px solid #ddd;
     >span{
       float: left;
       width: 47%;
     }
    >p{
      float: left;
      width: 53%;
      background: #019fe8;
      color: #fff;
    }
  }

  .fade1-enter-active /* .fade-leave-active below version 2.1.8 */
  {
    transition: all 0.5s;
    opacity: 0;
    >div{
      transition: all 0.5s;
      transform: translateY(100%);
    }
  }
  .fade1-enter-to /* .fade-leave-active below version 2.1.8 */
  {
    opacity: 1;
    >div{
      transform: translateY(0);
    }
  }
  .fade1-leave-active /* .fade-leave-active below version 2.1.8 */
  {
    transition: all 0.5s;
    opacity:1;
    >div{
      transition: all 0.5s;
      transform: translateY(0);
    }
  }
  .fade1-leave-to /* .fade-leave-active below version 2.1.8 */
  {
    opacity: 0;
    >div{
      transform: translateY(100%);
    }
  }
</style>
